/*
 * This file is part of Avenge <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Avenge is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Avenge is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
 */

io-steps
{
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

/* this element is used only to decorate via horizontal line */
io-steps::before
{
  position: absolute;
  z-index: -1;
  top: 12px;
  width: 100%;
  height: 1px;
  background-color: #bcbcbc;
  font-size: 1px;
  line-height: 1px;
  content: " ";
}

html:not([dir="rtl"]) io-steps button,
io-steps button
{
  margin: initial;
  padding: initial;
}

io-steps button
{
  min-width: 80px;
  border: 0;
  outline: none;
  color: #077ca7;
  background: #f3f3f3;
  font-size: small;
  font-weight: initial;
  text-transform: inherit;
}

io-steps button::before
{
  display: block;
  width: 24px;
  height: 24px;
  margin: auto;
  margin-bottom: 8px;
  border-radius: 12px;
  color: #fafbfd;
  background-color: #077ca7;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 24px;
  content: attr(data-value);
}

io-steps button:disabled::before
{
  background-color: #9b9b9b;
}

io-steps button:disabled
{
  color: #d8d8d8;
}

io-steps button.completed::before
{
  content: "✔";
  animation: io-steps-completed 0.3s ease-in-out;
}

@keyframes io-steps-completed
{
  0%
  {
    content: " ";
  }

  30%
  {
    font-size: 0;
    content: "✔";
    transform: scale(0.5);
  }
}
